<template>
  <el-container class="chat-page">
    <el-aside width="280px" class="chat-list-box">
      <div class="chat-list-header">
        <el-input class="search-text" placeholder="请输入关键字" v-model="searchText">
          <i class="el-icon-search el-input__icon" slot="prefix"> </i>
        </el-input>
      </div>
      <div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..." element-loading-spinner="el-icon-loading" element-loading-background="#eee">
        <div class="chat-loading-box"></div>
      </div>
      <el-scrollbar class="chat-list-items">
        <div v-for="(chat,index) in chatStore.chats" :key="index">
          <chat-item v-show="!chat.delete&&chat.showName.includes(searchText)" :chat="chat" :online="chat.online" :index="index" @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)" :active="chat === chatStore.activeChat"></chat-item>
        </div>
      </el-scrollbar>
    </el-aside>
    <el-container class="chat-box">
      <chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>
    </el-container>
  </el-container>
</template>

<script>
import ChatItem from '../components/chat/ChatItem.vue'
import ChatBox from '../components/chat/ChatBox.vue'

export default {
  name: 'chat',
  components: {
    ChatItem,
    ChatBox
  },
  data() {
    return {
      searchText: '',
      messageContent: '',
      group: {},
      groupMembers: [],
      loadingInstance: null,
      loginForm: { terminal: this.$enums.TERMINAL_TYPE.WEB }
    }
  },
  methods: {
    onActiveItem(index) {
      this.$store.commit('activeChat', index)
    },
    onDelItem(index) {
      this.$store.commit('removeChat', index)
    },
    onTop(chatIdx) {
      this.$store.commit('moveTop', chatIdx)
    },
    loadingLogin() {
      this.loadingInstance = this.$loading({
        lock: true,
        // text: '加载中...',
        spinner: 'el-icon-loading'
        // background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    handleMessage(event) {
      // console.log('login', event.data)
      if (event.data.logout) {
        // sessionStorage.removeItem('accessToken')
        localStorage.removeItem('accessToken')
      }
      // 这里可以添加验证 event.origin 来确保安全
      if (event.data && event.data.userName) {
        this.loginForm.userName = event.data.userName
        // this.loginForm.password = event.data.password
        this.loginForm.nickName = event.data.userName
        this.$store.commit('setUserAvatar', event.data.avatar)
        console.log('login', this.$store.state.userStore)
        // if(this.$store.state.userStore.userInfo.userName === event.data.userName) return
        // this.autoLogin()
      }
    },
    autoLogin() {
      this.loadingLogin()
      this.$http({
        url: '/login',
        method: 'post',
        data: this.loginForm
      }).then(data => {
        // 保存密码到cookie(不安全)
        // this.setCookie('username', this.loginForm.userName)
        // this.setCookie('password', this.loginForm.password)
        // 保存token
        // sessionStorage.setItem('accessToken', data.accessToken)
        // sessionStorage.setItem('refreshToken', data.refreshToken)
        localStorage.setItem('accessToken', data.accessToken)
        localStorage.setItem('refreshToken', data.refreshToken)
        // this.$message.success('登陆成功')
        // this.$router.push('/home/chat')
        // this.$store.dispatch('load')
        this.loadingInstance.close()
      })
    }
  },
  computed: {
    chatStore() {
      return this.$store.state.chatStore
    },

    loading() {
      return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
    }
  },
  mounted() {
    window.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    // 清除事件监听器
    window.removeEventListener('message', this.handleMessage)
  }
}
</script>

<style lang="scss">
.chat-page {
  font-family: '方正小标宋', sans-serif;
  .chat-list-box {
    display: flex;
    flex-direction: column;
    border-right: #53a0e79c solid 1px;
    background: white;
    width: 3rem;

    .chat-list-header {
      background-color: #f2f7ff;
      padding: 3px 20px;
      line-height: 50px;
      border-bottom: 1px #ddd solid;

      .el-input__inner {
        border-radius: 20px !important;
        background-color: #fff;
        // line-height: 36px;
        // height: 36px;
      }
    }

    .chat-list-loading {
      height: 50px;
      background-color: #eee;

      .chat-loading-box {
        height: 100%;
      }
    }

    .chat-list-items {
      flex: 1;
      background: #f2f7ff;
      margin: 0 3px;
    }
  }
}
</style>